<template>
  <el-dialog :model-value="true" :close-on-click-modal="true" :before-close="handleClose" title="分配填报权限" width="1200px">
    <el-row>
      <el-col :span="11">
        <div class="form-box">
          <ul>
            <li v-for="(item, index) in formList" :key="index">
              <p class="title">{{ item.writeFormName }}</p>
              <div class="tags">
                <el-tag v-for="(itemTwo, indexTwo) in item.tags" :key="indexTwo" class="tags">
                  {{ itemTwo.filterName }}
                </el-tag>

              </div>
            </li>
          </ul>
        </div>

      </el-col>
      <el-col :span="1" style="margin-top:160px;margin-left:10px;margin-right:10px">
        <img :src="rightArrow" alt="">
      </el-col>
      <el-col :span="11">
        <OrgWorkPeople ref="orgRef" :scopeInfo="scopeInfo" @on-update="changeData"></OrgWorkPeople>
      </el-col>
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button :loading="loading" type="primary" @click="handleSubmit('save')">确认新增</el-button>
        <el-button :loading="loading" type="primary" @click="handleSubmit('update')">确认替换</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { onMounted, reactive, toRefs } from 'vue'
import OrgWorkPeople from '@/components/OrgWorkPeople/index.vue'
import { useUserStore } from '@/store/modules/user'
import api from '@/api/index'
import { ElMessage } from 'element-plus'
import { updateData, submitDataHanle, queryPermisson } from './common'
import rightArrow from '@/assets/images/righArrow.png'
export default {
  components: { OrgWorkPeople },
  emits: ['close', 'on-update'],
  props: {
    selectList: {
      type: Array,
      default: () => []
    }
  },
  setup(props, { emit }) {
    const userStore = useUserStore()
    const state = reactive({
      loading: false,
      formList: [],
      scopeInfo: '',
      orgRef: null,
      submitData: [],
      rightArrow
    })

    const methods = {
      handleClose() {
        emit('close')
      },
      handleSubmit(type) {
        state.orgRef.submit()
        submitDataHanle(methods, emit, state.submitData,type)
      },
      changeData([data, text]) {
        updateData([data, text], props.selectList, state)
      },

      async getWiterFormData() {
        let formCodes = props.selectList.map(item => item.formCode)
        let result = await queryPermisson(formCodes, props.selectList)
        state.formList = result
      }

    }
    onMounted(() => {
      userStore.getWorkePosition // 获取岗位
      methods.getWiterFormData()
    })
    return {
      ...toRefs(state),
      ...methods
    }
  },
}
</script>
<style lang="scss" scoped>
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tags {
  margin-right: 5px;
  margin-top: 5px;
}

.form-box {
  ul {
    height: 400px;
    overflow-y: scroll;
    border: 1px solid #c0c4cc;
    padding: 10px;

    li {
      border: 1px solid #c0c4cc;
      margin-bottom: 20px;
      padding: 10px;

      p {
        margin: 0;

        &.title {
          font-size: 14px;
          color: #3d3d3d;
        }
      }
    }
  }
}
</style>
